<template>
  <div style="padding: 1vh 1vw; margin-left: 20vw; width: 78vw; height: 98vh">
    <div v-if="stepIndex > 0" class="step-box">
      <div>第一步</div>
    </div>
    <div v-if="stepIndex > 1" class="step-box">
      <div>第二步</div>
    </div>
    <div v-if="stepIndex > 2" class="step-box">
      <div>第三步</div>
    </div>
    <div v-if="stepIndex > 3" class="step-box">
      <div>第四步</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stepIndex: 0,
    };
  },
  methods: {
    initPromise() {
      let that = this;
      new Promise((resolve, reject) => {
        // 成功
        resolve({
          code: 200,
          data: {
            tip: "这是返回来的data",
            list: [
              {
                value: 1,
              },
              {
                value: 2,
              },
            ],
          },
        });
      }).then((res) => {
        console.log(res);

        setTimeout(() => {
          that.stepIndex = 1;
        }, 1000);

        setTimeout(() => {
          that.stepIndex = 2;
        }, 2000);

        setTimeout(() => {
          that.stepIndex = 3;
        }, 3000);

        setTimeout(() => {
          that.stepIndex = 4;
        }, 4000);
      });
    },
  },
  mounted() {
    this.initPromise();
  },
};
</script>

<style scoped>
.step-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1vh;
  margin-bottom: 2vh;
  width: 20vw;
  height: 20vh;
  background-color: rgba(0, 45, 224, 0.2);
  font-size: 26px;
  color: #fff;
}
</style>